<template>
  <md-nav-bar title="我的订单" backgroundColor="#ffffff"></md-nav-bar>
  <view class="order-container">
    <view
      class="order-card"
    >
      <view class="order-body">
        <image
          class="order-img"
          :src="data.orderDetail.imageUrl"
          mode="aspectFill"
        />
        <view class="order-info">
          <view class="order-title">{{ data.orderDetail.spuName }}</view>
          <view class="order-type">{{ subType(data.orderDetail.isongProductType) }}</view>
        </view>
        <view class="order-status">
          <view class="order-status">{{ orderStatus(data.orderDetail.status) }}</view>
          <view class="order-total">
            <text class="order-price">￥{{ formatUnitCentToYuan(data.orderDetail?.price, 2) }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="order-body flex-column">
      <view class="order-header">
        <view class="order-id">
          实付金额：
        </view>
        <view class="order-status">¥{{ formatUnitCentToYuan(data.orderDetail.price, 2) }}</view>
      </view>
      <view class="order-header">
        <view class="order-id">
          订单编号：
        </view>
        <view class="order-status">{{ data.orderDetail.orderNo }}</view>
      </view>
      <view class="order-header">
        <view class="order-id">
          下单时间：
        </view>
        <view class="order-status">{{ data.orderDetail.orderCreateTime }}</view>
      </view>
      <view class="order-header">
        <view class="order-id">
          付款时间：
        </view>
        <view class="order-status">{{ data.orderDetail.payTime }}</view>
      </view>
      <view class="order-header">
        <view class="order-id">
          付款人：
        </view>
        <view class="order-status">{{ data.orderDetail.payerName }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { formatUnitCentToYuan, orderStatus, subType } from '@/utils/util';
// 接口
import api from '@/api/index';
import type { User } from '@/api/data';

const data = reactive({
  orderDetail: {} as User.Order.Detail
});

// 获取订单详情
const fetchGetOrderinfo = async (oderId:number) => {
  try {
    const res = await api.Order.orderDetail({
      orderId: oderId
    });
    data.orderDetail = res.data;
  } catch (e) {}
};

onLoad((options: any) => {
  fetchGetOrderinfo(options.orderId)
});
</script>

<style lang="scss" scoped>
.order-container {
  min-height: 100vh;
  background: #f5f8f7;
  padding: 0 0 32rpx 0;
}
.order-card {
  background: #fff;
  border-radius: 24rpx;
  margin-top: 24rpx;
  box-shadow: none;
  padding: 0;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 24rpx;
  font-size: 28rpx;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  background-color: #ffffff;
}
.order-id {
  color: #222;
  display: flex;
  align-items: center;
  font-size: 26rpx;
}
.order-id-dot {
  display: inline-block;
  width: 15rpx;
  height: 30rpx;
  margin-right: 12rpx;
}
.order-status {
  color: #1fa37a;
  font-size: 28rpx;
  flex:1;
  text-align: right;
}
.order-body {
  display: flex;
  align-items: center;
  padding: 18rpx 24rpx 18rpx 24rpx;
}
.order-img {
  width: 96rpx;
  height: 96rpx;
  border-radius: 16rpx;
  background: #eee;
  margin-right: 18rpx;
}
.order-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.order-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 500;
  margin-bottom: 8rpx;
  width: 320rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-type {
  font-size: 24rpx;
  color: #888;
}
.order-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 18rpx 24rpx 24rpx 24rpx;
  font-size: 28rpx;
}
.order-count {
  color: #888;
  margin-right: 18rpx;
  font-size: 26rpx;
}
.order-total {
  color: #222;
}
.order-price {
  color: #1fa37a;
  font-size: 32rpx;
  font-weight: 600;
  margin-left: 4rpx;
}
.flex-column {
flex-direction: column;
}
</style>